<template>
    <el-dialog :modal="false" :show-close="false" :visible.sync="visible" append-to-body width="20%"   :before-close="handleClose" custom-class="report">
        <div class="complaint pl-20 pr-20" style="z-index: 100000;">
            <div class="complaint-close">
                <i @click="visible=false" class="el-icon el-icon-close color-999 cursor-pointer font-12"></i>
            </div>
            <div class="text-center mt-0">
                <div class="color-333 mt-15 font-17">举报内容</div>
            </div>
            <div class="mt-10 width-100b">
                <div class="flex align-flex-start">
                    <div>
                        <span class="color-red">*</span>
                    </div>
                    <div class="ml-6 flex-1">
                        <div>
                            <span class="color-333 font-17">举报理由</span>
                            <span class="color-999 pl-6">请选择举报理由，可多选</span>
                        </div>
                        <div class="pl-0 pr-20">
                            <el-row :gutter="10">
                                <el-col :key="index" :span="4" v-for="(item,index) in labels">
                                    <div :class="{'select-label':item.select}" @click="selectFun(item)" class="pd-4 pl-12 pr-12 radius-4 text-center mt-10 cursor-pointer bg-f5">{{item.name}}</div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-20 width-100b">
                <div class="flex align-flex-start width-100b">
                    <div>
                        <span class="color-red">*</span>
                    </div>
                    <div class="ml-6 flex-1">
                        <div>
                            <span class="color-333 font-17">问题描述</span>
                        </div>
                        <div class="mt-10 pl-0 pr-20">
                            <el-input :rows="4" placeholder="请对举报内容进行描述" style="background:#F5F5F5" type="textarea" v-model="content"></el-input>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-20 width-100b">
                <div class="flex align-flex-start width-100b">
                    <div>
                        <span class="color-red">&nbsp;&nbsp;</span>
                    </div>
                    <div class="ml-6 flex-1">
                        <div>
                            <span class="color-333 font-17">上传图片（选填）</span>
                        </div>
                        <div class="mt-10 pl-0 pr-20">
                            <el-upload :action="uploadApi" :data="{ file_type: 'image' }" :file-list="file_list" :headers="headers" :limit="5" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handleSuccess" list-type="picture-card" multiple>
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-40 width-100b">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <div class="flex jus-flex-end">
                            <el-button @click="handleClose();visible=false" style="width:200px">取消</el-button>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div>
                            <el-button :loading="loading" @click="submit" class="pulish-button">立即举报</el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <el-dialog :visible.sync="dialogVisible" append-to-body width="50%">
            <img :src="dialogImageUrl" alt width="100%" />
        </el-dialog>
    </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import { JSEncrypt } from 'encryptlong' //引用
import config from '@/utils/config'
let decrypt = new JSEncrypt()
decrypt.setPrivateKey(config.cert.privateKey)
export default {
    props: {
        creation: {
            type: Object,
            default() {
                return {}
            },
        },
        label_type: {
            type: String,
            default: 'complaints',
        },
        type: {
            type: String,
            default: 'creation',
        },
    },
    computed: {
        ...mapGetters(['uploadApi']),
        headers() {
            return {
                Authorization: 'Bearer ' + this.$store.state.user.token,
            }
        },
    },
    data() {
        return {
            visible: false,
            labels: [],
            choose_index: null,
            content: '',
            file_list: [],
            dialogImageUrl: '',
            dialogVisible: false,
            loading: false,
            deleteId: [],
        }
    },
    mounted() {
        this.getLabels()
    },
    methods: {
        handleClose() {
            this.getLabels()
            this.deleteId = []
        },
        getLabels() {
            let param = {
                type: this.label_type,
            }
            this.$request.get('/labels/index', param).then((res) => {
                this.labels = res
            })
        },
      
        selectFun(item) {
            console.log('item',item)
            //判断是否有select属性
            if (item.hasOwnProperty('select') && item.select) {
                this.$set(item, 'select', false)
            } else {
                this.$set(item, 'select', true)
            }

            if (this.deleteId.includes(item.name)) { //存在就删除
                console.log(`${item.name} 存在于数组中`);
                this.deleteId.splice(this.deleteId.indexOf(item.name), 1);
                console.log(' this.deleteId', this.deleteId)
            } else {
                console.log(`${item.name} 不存在于数组中`);//不存在就添加
                this.deleteId.push(item.name)
                console.log(' this.deleteId', this.deleteId)
            }
        },

        chooseLabel(index) {
            if (this.choose_index == index) {
                this.choose_index = null
            } else {
                this.choose_index = index
            }
        },
        handleRemove(...data) {
            let decryptMsg = decrypt.decryptLong(data[0].response, 'utf-8')
            let response = JSON.parse(decryptMsg)
            this.file_list.forEach((item, index) => {
                if (item == response.data[0].full_path) {
                    this.file_list.splice(index, 1)
                }
            })
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url
            this.dialogVisible = true
        },
        handleSuccess(response) {
            var decryptMsg = decrypt.decryptLong(response, 'utf-8')
            response = JSON.parse(decryptMsg)
            if (response.code != 200) {
                this.$message.error(response.message)
                return false
            }
            this.file_list.push(response.data[0].full_path)
        },
        submit() {
            if (this.deleteId.length == 0) {
                this.$message({
                    message: '请先选择投诉标签',
                    type: 'warning',
                    customClass: 'super-message',
                })
                return false
            }
            if (!this.content) {
                this.$message({
                    message: '请描述投诉的内容',
                    type: 'warning',
                    customClass: 'super-message',
                })
                return false
            }
            let param = {
                labels: this.deleteId,
                content: this.content,
                type: this.type,
                object_id: this.creation.creation_id,
                medias: this.file_list,
            }
            this.loading = true
            this.$request
                .post('/complaint/create', param)
                .then((res) => {
                    this.$message({
                        message: '感谢您的投诉，我们会尽快处理',
                        type: 'success',
                        customClass: 'super-message',
                    })
                    this.choose_index = null
                    this.content = ''
                    this.file_list = []
                    this.visible = false
                    this.deleteId = []
                    return false
                })
                .finally(() => {
                    this.loading = false
                })
        },
    },
}
</script>

<style lang="scss" scoped>
.complaint {
    position: absolute;
    transition: 0.2s all;
    background: #fff;
    margin-left: 140%;
    margin-top: 50%;
    width: 700px;
    height: 600px;
    left: calc(50% - 350px);
    top: calc(50% - 150px);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    &-close {
        position: absolute;
        right: 10px;
        top: 10px;
    }
    &-close .el-icon-close {
        font-size: 18px;
    }
}
/deep/.el-textarea__inner {
    background: #f5f5f5;
}
/deep/.pulish-button {
    background: #ff1c6d;
    color: #fff;
    width: 200px;
}
/deep/.el-upload--picture-card,
/deep/.el-upload-list__item {
    width: 120px !important;
    height: 120px !important;
    line-height: 120px;
}
.select-label {
    background: #ff1c6d;
    color: #fff;
}
</style>